<template>
    <div class="listBox">
        <div class="itemCla titleWidth">
            <div class="itemCom">飞行航线</div>
            <div class="itemCom">任务执行者</div>
            <div class="w65">授权人</div>
            <div class="w140">授权时间</div>
            <div class="itemCom">任务进度</div>
            <div class="optionText">操作</div>
        </div>
        <div class="scroll">
            <div v-for="item in list" :key="item.id" class="itemCla specialCla">
                <div class="itemCom">{{item.lineName}}</div>
                <div class="itemCom">{{item.name}}</div>
                <div class="w65">{{item.person}}</div>
                <div class="w140">{{item.time}}</div>
                <div class="itemCom" :class="statusCla[item.status]">{{item.process}}</div>
                <div class="btBox">
                    <el-button class="btText danger" link>关闭</el-button>
                    <div class="blank" />
                    <el-button class="btText primery" link>再次执行</el-button>
                    <div class="blank" />
                    <el-button class="btText primery" link>查看</el-button>
                </div>
            </div>
        </div>
    </div>
  </template>
  
  <script setup name="Dashboard">
  const statusCla = ['', 'complete']
    const list = [
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 1
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 1
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 1
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 1
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 1
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 0
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 0
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 0
        },
        {
            lineName: '航线1',
            name: '航空站1',
            person: '张三',
            time: '2023-11-19 15:35',
            process: '已完成',
            status: 1,
            id: 0
        },
    ]
  </script>
  
  <style lang="scss" scoped>
    .listBox {
        width: calc(100% - 52px);
        margin-top: 30px;
    }
    .scroll {
        height: 300px;
        overflow-y: scroll;
    }
    .scroll::-webkit-scrollbar-thumb {
        background-color: #426174;
        border-radius: 10px;
    }
    .scroll::-webkit-scrollbar{
        width: 5px;
        height: 10px;
        background-color: none;
    }
    
    .itemCla {
        width: calc(100% - 10px);
        height: 42px;
        box-shadow: inset 0px 0px 40px 1px rgba(64,229,240,0.6);
        // opacity: 0.55;
        display: flex;
        align-items: center;
        color: #fff;
        padding: 0px 22px;
        box-sizing: border-box;
        font-size: 12px;
        margin-top: 8px;
    }
    .specialCla:nth-child(2n) {
        box-shadow: inset 0px 0px 40px 1px rgba(64,229,240,0.12);
    }
    .specialCla:nth-child(2n-1) {
        box-shadow: inset 0px 0px 40px 1px rgba(64,229,240,0.33);
    }
    .titleWidth {
        width: calc(100% - 15px);
        box-shadow: inset 0px 0px 50px 1px rgba(64,229,240,0.6);
    }
    .itemCom {
        width: 80px;
    }
    .w140 {
        width: 130px;
    }
    .w65 {
        width: 65px;
    }
    .blank {
        width: 2px;
        height: 13px;
        background-color: #00B9FF;
        margin: 0 5px;
    }
    .btBox {
        display: flex;
        align-items: center;
    }
    .btText {
        font-size: 12px;
    }
    .danger {
        color: #FE545B
    }
    .primery {
        color: #62D0FF;
    }
    .optionText {
        width: 140px;
        text-align: center;
    }
    .complete {
        color: #19F38D;
    }
  
  </style>
  